import React, {FC, useEffect, useState} from 'react';
import styles from './Section02.module.scss'
import {Button} from "react-bootstrap";

interface Section02Props {
}

const comInfoArr = [
    {name: '基于react-router的集中式路由', link: 'https://www.npmjs.com/package/central-react-router'},
    {name: '基于umi-request的防重ajax请求组件', link: 'https://www.npmjs.com/package/anti-replay-ajax-util'}
];

const Section02: FC<Section02Props> = (props) => {
    const {children} = props;

    useEffect(() => {
        console.log('Section02 组件挂载完毕!');
    }, []);

    const onClickCom = (link: string) => {
        window.open(link, '_blank');
    }

    const comArr = [];
    for (let i = 0; i < comInfoArr.length; i++) {
        comArr.push(<Button size="lg" key={i}
                            onClick={() => onClickCom(comInfoArr[i].link)}>{comInfoArr[i].name}</Button>)
    }

    console.log('Section02 组件render!');
    return (
        <div className={`${styles.main}`}>
            <div className={'container '}>
                <h2>有限组件 & 无限创意</h2>
                <div className={styles.compPanel}>
                    {comArr}
                </div>
                <div className={styles.mainBtnPanel}>
                    <Button block>更多组件尽请期待&nbsp;&nbsp;<i className="bi bi-arrow-right"></i></Button>
                </div>
            </div>
        </div>
    );
};

export default Section02;
